<template>
  <div class="person-add-container">
    <!-- 表单 -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <!-- 姓名输入框 -->
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <!-- 性别下拉框 -->
      <el-form-item label="性别" prop="sex">
        <el-select v-model="ruleForm.sex" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
          <el-option label="沃尔玛购物袋" value="沃尔玛购物袋"></el-option>
        </el-select>
      </el-form-item>

      <!-- 出生日期输入框 -->
      <el-form-item label="出生日期" prop="brithday">
        <el-input v-model="ruleForm.brithday" placeholder="请输入出生日期"></el-input>
      </el-form-item>

      <!-- 死亡日期输入框 -->
      <el-form-item label="死亡日期" prop="deadday">
        <el-input v-model="ruleForm.deadday" placeholder="请输入死亡日期"></el-input>
      </el-form-item>

      <!-- 照片上传 -->
      <el-form-item label="照片" prop="image">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8081/people/file/addFile"
            :show-file-list="false"
            :on-success="onSuccess"
            v-model="ruleForm.image"
            :before-upload="beforeUpload"
        >
          <img v-if="ruleForm.image" :src="ruleForm.image" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <!-- 父节点下拉框 -->
      <el-form-item label="父节点" prop="parentId">
        <el-select v-model="ruleForm.parentId" placeholder="请选择父节点">
          <el-option v-for="item in dormitoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <!-- 提交按钮 -->
        <el-button type="success" @click="submitForm('ruleForm')">立即创建</el-button>

        <!-- 重置按钮 -->
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      category: null,
      imageUrl: '',
      ruleForm: {
        sex: '',
        name: '',
        brithday: '',
        deadday: '',
        image: '',
        parentId: ''
      },
      dormitoryList: '',
      rules: {
        sex: [{ required: true, message: '请输入性别', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        brithday: [{ required: true, message: '请输入出生日期', trigger: 'blur' }],
        deadday: [{ required: true, message: '请输入死亡日期', trigger: 'blur' }],
        image: [{ required: false, message: '请上传照片', trigger: 'blur' }],
        parentId: [{ required: true, message: '请选择父节点', trigger: 'change' }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      const _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post('http://localhost:8081/people/save', _this.ruleForm).then(function (resp) {
            if (resp.data.code == 0) {
              _this.$alert(_this.ruleForm.name + '添加成功', '', {
                cancelButtonText: '确定',
                callback: () => {
                  _this.$router.push('/peopleManager');
                }
              });
            }
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 文件上传成功后回调函数
    onSuccess(response) {
      // response 就是图片上传成功后返回的信息，名字可以任意，例如res,还有其他参数，具体使用可以查阅element的官网el-upload组件的介绍
      this.ruleForm.image = response.data;
    },
    beforeUpload(file) {
      // 在上传之前可以进行一些操作，例如验证文件类型、大小等
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return (isJPG || isPNG) && isLt2M;
    }
  },
  created() {
    const _this = this;
    this.$http.get('http://localhost:8081/people/allList').then(function (resp) {
      _this.dormitoryList = resp.data.data;
    });
  }
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 50px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.person-add-container {
  margin-top: 60px;
  margin-left: 330px;
  width: 300px;
  height: 550px;
  border: 0px solid red;
  background-color: rgba(146, 205, 255, 0.89);
  padding-right: 65px;
  padding-top: 50px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(108, 54, 54, 0.1);
}
</style>